<template>
  <div class="box padding">
    <el-drawer v-model="drawer" title="I am the title" direction="rtl">
      <user-select v-model="list"></user-select>
    </el-drawer>
    <el-button @click="openDrawer" class="margin-bottom"><i class="fa fa-fw fa-user"></i>选择用户</el-button>
    <div class="sea-gap-group">
      <el-tag v-for="(item, idx) in list" :key="idx">
        {{ item.userName }}
      </el-tag>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import UserSelect from "./user-select.vue";

/**
 * 用户选择 - 盒
 *
 * 点击之后，从侧面弹出选择面板，占用的面积较大，
 *
 * 考虑到界面美观，当前组件可能不那么实用，可以作为代码参考，根据实际需求加以改造。
 */
const list = ref([]);
const drawer = ref(false);

const openDrawer = () => {
    drawer.value = true;
}
</script>
<style scoped>

</style>